<script lang="tsx">
import { ref, h } from 'vue'
import SearchBox from './SearchBox.vue'
import { ElForm, ElButton } from 'element-plus'

export default {
  props: {
    hasBox: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default: () => ({})
    },
    page: {
      type: Object,
      default: () => ({})
    },
    sort: {
      type: Object,
      default: () => ({})
    },
    columns: {
      type: Array,
      default: () => []
    },
    hiddenColumns: {
      type: Set,
      default: () => new Set()
    }
  },
  setup(props, { emit }) {
    const isCollapse = ref(false)

    const trigger = (val: boolean) => {
      isCollapse.value = val
    }

    const search = () => {
      emit('search')
    }

    const queryForReset = { ...props.query }
    const reset = () => {
      Object.assign(props.query, queryForReset)
      search()
    }

    const formSubmit = (e) => {
      e.preventDefault()
      search()
    }

    const changeColumn = prop => {
      emit('changeColumn', prop)
    }
    return {
      isCollapse,
      trigger,
      search,
      reset,
      formSubmit,
      changeColumn
    }
  },
  render() {
    const input = this.$slots.input ? this.$slots.input({ isCollapse: this.isCollapse, showTrigger: this.hasBox, data: this.query, columns: this.columns, hiddenColumns: this.hiddenColumns }) : null
    const auth = this.$slots.auth ? this.$slots.auth({ query: this.query, page: this.page, sort: this.sort, row: this.$attrs.row }) : null

    const searchBox = h(
      SearchBox,
      { isCollapse: this.isCollapse },
      {
        default: () => this.$slots.default ? this.$slots.default({ data: this.query }) : null,
        footer: () => (
          <div class="search-btns">
            <ElButton type="primary" onClick={this.search}>查询</ElButton>
            <ElButton type="warning" onClick={this.reset}>重置</ElButton>
            <ElButton onClick={() => this.trigger(false)}>收起</ElButton>
          </div>
        )
      }
    )
    return (
      <ElForm class="search" label-width="auto" onSubmit={this.formSubmit}>
        <div class="search-header">
          <div class="search-input">
            {input}
          </div>

          <div>
            { auth }
          </div>
        </div>
        { this.hasBox ? searchBox : null }
      </ElForm>
    )
  }
}
</script>

<style scoped lang="scss">
.search {
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  :deep(.el-date-editor) {
    width: 100%;
  }
  :deep(.el-input-number) {
    width: 100%;
  }
}
</style>
